<template>
  <view class="recommend_content">
    <view v-show="isEmpty">
      <EmptyView v-on:emptyClick="emptyClick" />
    </view>
    <scroll-view
      v-show="isEmpty === false"
      scroll-y="true"
      class="recommend_content"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <view class="recommend_list">
        <view
          v-for="(item, index) in recommendList.forUser"
          :key="index"
          class="card"
        >
          <view class="top-card" @click.stop="toPersionHomeAction(item)">
            <view class="tip">{{ "缘分值：" + (item.value || 50) }}</view>
            <view class="avatar-and-info">
              <view class="avatar-box">
                <image :src="item.userinfo.avatar" mode="aspectFill"></image>
              </view>
              <view class="info-box">
                <text class="name">{{ item.userinfo.nick_name }}</text>
                <view class="per">
                  <text class="vip" v-if="showVip(item.userinfo.vip)">{{
                    getVipText(item.userinfo.vip)
                  }}</text>
                  <text v-if="item.userinfo.certificated" class="real"
                    >实名</text
                  >
                  <text class="tag2" v-if="item.userinfo.age"
                    >{{ item.userinfo.age }}岁</text
                  >
                </view>
                <view class="info">
                  <text v-if="item.userinfo.job" class="identity">{{
                    item.userinfo.job
                  }}</text>
                  <text
                    v-if="item.userinfo.height && item.userinfo.job"
                    class="info-line"
                    >|</text
                  >
                  <text class="height">{{ item.userinfo.height }}cm</text>
                  <text v-if="item.userinfo.education" class="info-line"
                    >|</text
                  >
                  <text class="educational">{{ item.userinfo.education }}</text>
                  <text v-if="item.userinfo.marital_status" class="info-line"
                    >|</text
                  >
                  <text class="isMarried">{{
                    item.userinfo.marital_status
                  }}</text>
                </view>
              </view>
            </view>
            <view class="des-soliloquy">
              {{ item.userinfo.soliloquy }}
            </view>
          </view>
          <view class="btns">
            <button type="primary" class="btn-box" open-type="contact">
              <image class="icon" src="/static/fate.png" mode=""></image>
              <text class="no" style="display: block; font-size: 30upx"
                >缘分牵线</text
              >
            </button>
            <view @click.stop="heartMessageAction(item)" class="btn no">
              心动留言（ 1
              <image
                src="../../../static/images/detail/flower_2.png"
                mode=""
              ></image>
              ）
            </view>
          </view>
        </view>
      </view>
      <view class="bottom"></view>
    </scroll-view>
  </view>
</template>

<script>
import { EventBus } from "@/util/event-bus.js";
import { recommendUsers, getGiftsList } from "@/api/home/home.js";
// import EmptyView from "@/pageA/empty/empty.vue";
// import { followed } from '@/api/user/user.js';
export default {
  components: {
    // EmptyView,
  },
  data() {
    return {
      loadingTop: 0,
      recommendList: [], // 推荐列表
      _freshing: false,
      triggered: false,
      gifts: [],
      isEmpty: false,
    };
  },
  watch: {},
  onBackPress() {
    console.log("onBackPress---------");
  },
  created() {
    let that = this;
    EventBus.$on("loginSuccess", function (res) {
      that.getRecommend();
    });
    EventBus.$on("recommendListRefresh", function (res) {
      that.getRecommend(true);
    });
    this.getGiftsListRequest();
  },
  mounted() {
    // this.getRecommend();
    this._freshing = false;
    this.triggered = true;
  },
  methods: {
    onPulling(e) {},
    onRefresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.getRecommend();
    },
    onRestore() {
      this.triggered = "restore";
    },
    onAbort() {},
    getData() {},
    // 获取 推荐列表
    getRecommend(showLoading = false) {
      this.showLoading(showLoading);
      recommendUsers().then(
        (res) => {
          if (res.status == 1) {
            this.recommendList = res.data;
            console.log("------user/recommend--------", this.recommendList);
          }
          if (!showLoading) {
            this.triggered = false;
            this._freshing = false;
          }
          this.isEmpty = this.recommendList.length === 0;
          this.showLoading(false);
        },
        (err) => {
          if (!showLoading) {
            this.triggered = false;
            this._freshing = false;
          }

          this.isEmpty = true;
          this.showLoading(false);
        }
      );
    },
    getGiftsListRequest() {
      getGiftsList().then((res) => {
        if (res.status == 1) {
          this.gifts = res.data;
          console.log("------gifts--------", this.gifts);
        }
      });
    },
    emptyClick() {
      this.getRecommend(true);
    },
    showLoading(show = true) {
      if (show) {
        uni.showLoading({
          title: "",
        });
      } else {
        uni.hideLoading();
      }
    },
    hellowAction(item) {
      console.log("hello");
      let giftsData = {};
      giftsData.gifts = this.gifts;
      giftsData.userInfo = item;
      this.$emit("showHello", giftsData);
    },
    /// 心动留言
    heartMessageAction(item) {
      // if (this.isAuth() == false) {
      // 	this.$emit("showAuth", {
      // 		userName: item.nick_name,
      // 		avatar: item.avatar
      // 	})
      // 	return
      // }

      console.log("~~~item", item);
      this.hellowAction(item);
    },
    /// 了解ta
    knowAction(item) {
      uni.showToast({
        title: "功能待开发",
        icon: "none",
      });
      // if (this.isAuth() == false) {
      // 	this.$emit("showAuth", {
      // 		userName: item.nick_name,
      // 		avatar: item.avatar
      // 	})
      // 	return
      // }
    },
    isAuth() {
      return getApp().globalData.userInfo.certificated || false;
    },
    getText(str) {
      let content = str || "";
      if (content == "") {
        return "保密";
      } else {
        return content;
      }
    },
    getHeightText(str) {
      let content = str || "";
      if (content == "") {
        return "保密";
      } else {
        return content + "cm";
      }
    },
    showVip(vip) {
      let vipStr = vip || "";
      if (vipStr == "-1" || vipStr == "") {
        return false;
      } else {
        return true;
      }
    },
    getVipText(str) {
      let vip = str || "VIP";
      return vip;
    },
    hideAuthAction() {},
    toPersionHomeAction(item) {
      console.log(item);
      let userId = item.userinfo.user_id;
      let url = "/pageA/personalHome/personalHome?user_id=" + userId;
      uni.navigateTo({
        url: url,
      });
    },
    checkSoliloquy(str) {
      let content = str || "";
      if (content == "") {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

button::after {
  border: none;
  background-color: none;
}

.btn-box {
  margin: unset;
}
button {
  position: relative;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  // line-height: 1;
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  width: 220rpx;
  height: 72rpx;
  font-size: 12px;
  background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%) !important;
  color: #fff;
  display: flex;
  align-items: center;
}

.icon {
  width: 40upx;
  height: 40upx;
  margin-right: 10upx;
}

.recommend_content {
  height: 100%;
  width: 100%;
  background-color: #ffffff;

  .bottom {
    height: 35rpx;
    width: 100%;
  }

  .mnoticebar {
    width: 300rpx;
  }

  .tag2 {
    font-size: 26rpx;
    color: rgba(45, 142, 255, 1);
    border-radius: 4rpx;
    border: 2rpx solid rgba(45, 142, 255, 1);
    padding: 0 10rpx;
    background: #e9f3ff;
  }

  .recommend_list {
    .card {
      width: 670rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      background: rgba(255, 255, 255, 1);

      .top-card {
        width: 670rpx;
        background: url("@/static/images/home/commond_card_bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 30rpx 18rpx;

        .tip {
          text-align: center;
          width: 156rpx;
          height: 54rpx;
          background: #f9d05a;
          font-size: 26rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #474a58;
          line-height: 54rpx;
        }

        .des-soliloquy {
          margin: 18rpx 6rpx 0 6rpx;
          border-radius: 8rpx;
          padding: 20rpx 14rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #8389a0;
          line-height: 45rpx;
          background: #ffffff;
        }

        .avatar-and-info {
          display: flex;
          flex-direction: row;
          margin-top: 30rpx;

          .avatar-box {
            width: 180rpx;
            height: 208rpx;
            background: url("@/static/images/home/commond_avatar_bg.png")
              no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

            image {
              width: 152rpx;
              height: 152rpx;
              border-radius: 76rpx;
              margin-bottom: 16rpx;
              margin-right: 4rpx;
            }
          }

          .info-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 30rpx;
            margin-bottom: 8rpx;
            padding-top: 0 8rpx;

            .per {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              margin-top: 10rpx;
              .name {
                color: #474a58;
                font-size: 34rpx;
                font-weight: 500;
                margin-right: 10rpx;
              }

              .vip {
                margin-right: 10rpx;

                border-radius: 4rpx;
                border: 2rpx solid #ffaa37;
                padding: 0 10rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: #ffaa37;
                line-height: 36rpx;
                background: #f4ede4;
              }

              .real {
                margin-right: 10rpx;
                font-size: 26rpx;
                color: #2d8eff;

                line-height: 36rpx;
                border-radius: 4rpx;
                border: 2rpx solid #2d8eff;
                padding: 0 10rpx;
                background-color: #e3e5f6;
              }
            }

            .info {
              margin-top: 20rpx;
              font-size: 26rpx;
              line-height: 36rpx;
              color: #8389a0;

              .info-line {
                text-align: center;
                line-height: 36rpx;
                padding: 0 10rpx;
              }
            }
          }
        }
      }

      .line {
        width: 622rpx;
        margin: 20rpx;
        border-bottom: 2rpx dashed #dfe1ec;
        background-color: #ffffff;
      }

      .btns {
        padding: 30rpx 14rpx;
        display: flex;
        justify-content: space-between;

        .btn {
          width: 299rpx;
          height: 72rpx;
          border-radius: 8rpx;
          border: 2rpx solid #dfe1ec;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;

          image {
            width: 26.8rpx;
            height: 31.2rpx;
            margin: 0 10rpx;
          }
        }

        .yes {
          background: #fff;
          color: #474a58;
        }

        .no {
          background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
          color: #fff;
        }
      }
    }
  }
}
</style>
